<template>
  <div class="free">
    <div class="topInfo">
      <ul>
        <li>
          <span>缴纳单位：</span>
          <span>{{ payUnit || '--' }}</span>
        </li>
        <li>
          <span>缴纳日期：</span>
          <span>{{ cashDepositInfo.operationDate || '--' }}</span>
        </li>
        <li>
          <span>缴纳方式：</span>
          <span>{{ cashDepositInfo.methodDesc || '--' }}</span>
        </li>
        <li>
          <span>缴纳形式：</span>
          <span>{{ cashDepositInfo.payMethodDesc || '--' }}</span>
        </li>
      </ul>
    </div>
    <div class="middlePay">
      <ul>
        <li>
          <span>应缴金额：</span>
          <span class="fontColorTheme"
            >{{ cashDepositInfo.shouldPayTotal }}万元</span
          >
        </li>
        <li>
          <span>免缴金额：</span>
          <span class="fontColorTheme"
            >{{ cashDepositInfo.shouldPayTotal }}万元</span
          >
          <span
            style="color: red; margin-left: 20px"
            v-if="userType == 'JC' && checktips"
          >
            审核提示：根据最新信用评级及减免配置，当前最高可减免金额为“{{
              checktips
            }}”元
          </span>
        </li>
      </ul>
    </div>
    <div class="mainDetail">
      <el-row>
        <span class="labelWidth">业务办理人：</span>
        <span class="information">{{ cashDepositInfo.operator || '--' }}</span>
      </el-row>
      <el-row>
        <span class="labelWidth">免缴原因：</span>
        <span class="information">{{ cashDepositInfo.remark || '--' }}</span>
      </el-row>
      <el-row>
        <el-col :span="1.5">
          <span class="labelWidth">缴纳凭证：</span>
        </el-col>
        <el-col :span="19">
          <!-- <elementImage :upLoadFile="upLoadFile" :fileMarginLeft="fileMarginLeft" :srcList="srcList" :oldSrcList="oldSrcList" :isDelFile="isDelFile" @changeSrcList="changeSrcList"></elementImage> -->
          <span v-if="upLoadFile.length > 0">
            <span class="information" style="margin-right: 6px">已上传</span>
            <el-link @click="toUploadFile">查看</el-link>
            <contractEnclosureDialog
              v-if="uploadContract"
              dialogTitle="缴纳凭证"
              :tableData="upLoadFile"
              @closeDialog="hiddenDialog"
            ></contractEnclosureDialog>
          </span>
          <span v-else>未上传</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cashDepositFree',
  props: [
    'depositId', //保证金id
    'projectId',
  ],
  data() {
    return {
      payUnit: '', //缴纳单位
      companyType: '', //0 建设方  5施工方
      upLoadFile: [], //缴纳凭证
      srcList: [],
      oldSrcList: [],
      cashDepositInfo: {},
      fileMarginLeft: '0', //详情文件居左样式
      uploadContract: false,
      checktips: '',
      userType: '',
    }
  },
  created() {
    //获取详情数据
    this.getCashDepositInfo()
    this.userType = localStorage.getItem('loginType')
  },
  methods: {
    async getchecktips(shouldPay) {
      const projectInfos = await this.axios.post(
        'api-p/project/expand/projectdetail',
        { projectId: this.projectId }
      )
      let params = {
        areaId: projectInfos.data.result.areaId,
        projectId: this.projectId,
        shouldPay,
      }
      this.axios
        .post('api-d/depositpayconfig/expand/checkTip', params)
        .then((res) => {
          if (!res.data.hasError) {
            this.checktips = res.data.result.freePayTotal
          }
        })
    },
    getCashDepositInfo() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/detail',
        data: {
          id: this.depositId,
        },
      })
        .then((response) => {
          var data = response.data.result
          this.cashDepositInfo = data
          this.companyType = data.companyType
          this.getchecktips(data.shouldPayTotal * 10000)
          if (this.companyType === '0') {
            //建设方
            this.payUnit = data.ownerName //缴纳单位名称
          }
          if (this.companyType === '5') {
            //施工方
            this.payUnit = data.contractorName //缴纳单位名称
          }
          this.upLoadFile = data.file
          for (var i = 0; i < this.upLoadFile.length; i++) {
            this.srcList.push(this.upLoadFile[i].url)
            this.oldSrcList.push(this.upLoadFile[i].url)
          }
        })
        .catch((error) => {})
    },
    /**
     * @description: 改变图片地址
     */
    changeSrcList(val) {
      this.srcList = val
    },
    toUploadFile() {
      this.uploadContract = true
    },
    hiddenDialog() {
      this.uploadContract = false
    },
  },
}
</script>

<style scoped lang="less">
.free {
  padding: 24px;
}
.topInfo {
  height: 38px;
  font-size: 14px;
  ul li {
    float: left;
    span:last-child {
      margin-right: 60px;
    }
  }
}
.middlePay {
  height: 56px;
  line-height: 56px;
  background: #f5f7fb;
  padding: 0 24px;
  border: 1px solid #dee5f4;
  ul li {
    float: left;
    font-size: 16px;
    span:last-child {
      color: #009588;
      margin-right: 84px;
    }
  }
}
.mainDetail {
  position: relative;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #dee5f4;
  .labelWidth {
    font-size: 14px;
    color: #333333;
    display: inline-block;
    height: 36px;
  }
  .information {
    font-size: 14px;
    color: #666666;
  }
  .imgStyle {
    margin-left: 16px;
    li {
      position: relative;
      margin-right: 20px;
      margin-top: 10px;
      i {
        position: absolute;
        right: -6px;
        top: -10px;
        font-size: 20px;
      }
    }
  }
}
</style>
